<template>
	<view class="page-content">
		<view class="search-box">
			<custom-input placeholder="搜索" background="#FFFFFF" :text="filterParmas.searchValue"
				@handleSearch="handleSearch"></custom-input>
		</view>
		<template v-if="isInit">
			<view class="search-history">
				<view class="mt-22 flex-row justify-between items-center" v-for="(item,index) in searchHistoryList"
					:key="index">
					<view class="flex-row items-center">
						<image class="shrink-0 image_3" src="/static/index/time.png" />
						<text class="ml-8 font" @click="handleHSearch(item)">{{item}}</text>
					</view>
					<image class="image_4" src="/static/common/del.png" @click="handleHistory(index)" />
				</view>
			</view>
		</template>
		<template v-else>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="changeTab" active-color="#000000"
				:bar-style="{background:'#FCD610'}" inactive-color="#606266" bg-color="transparent"></u-tabs>
			<scroll-view v-if="current===0" scroll-y style="flex: 1;overflow-y: auto;" @scrolltolower="onreachBottom"
				:refresher-enabled="true" @refresherrefresh="handlerefresh" :refresher-triggered="showrefresh">
				<template v-if="results.length===0&&status==='nomore'">
					<empty></empty>
				</template>
				<template v-else>
					<view class="quan-list-box">
						<circle-card v-for="item in results" :key="item"></circle-card>
					</view>
					<u-loadmore :status="status" />
				</template>
			</scroll-view>
			<scroll-view v-if="current===1" scroll-y style="flex: 1;overflow-y: auto;" @scrolltolower="onreachBottom"
				:refresher-enabled="true" @refresherrefresh="handlerefresh" :refresher-triggered="showrefresh">
				<template v-if="userResults.length===0&&status==='nomore'">
					<empty></empty>
				</template>
				<template v-else>
					<view class="user-box">
						<view class="flex-row justify-between items-center mt-16 list-item" v-for="item in userResults">
							<view class="flex-row items-center">
								<u-image src="" height="80rpx" width="80rpx" shape="circle" />
								<view class="flex-col items-start ml-9">
									<text class="font text_4">{item}</text>
									<!-- <text class="font_3 text_5 mt-9">在线</text> -->
								</view>
							</view>
							<view class="flex-col justify-start items-center button"><text class="font_2">关注</text></view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</template>
			</scroll-view>
		</template>
	</view>
	</view>
</template>

<script>
import circleCard from 'components/common/card/circle-card.vue'
import customInput from 'components/common/custom-input.vue'
export default {
  data() {
    return {
      isInit: true,
      current: 0,
      list: [
        {
          name: '内容',
        },
        {
          name: '用户',
        },
      ],
      results: [{}, {}, {}, {}, {}, {}],
      userResults: [{}, {}, {}, {}, {}, {}],
      status: 'loadmore',
      filterParmas: {
        searchValue: '',
      }, //筛选参数
      showrefresh: false,
      searchHistoryList: [],
    }
  },
  onLoad() {
    if (uni.getStorageSync('historyList'))
      this.searchHistoryList = uni.getStorageSync('historyList')
  },
  methods: {
    changeTab(index) {
      this.current = index
    },
    handleHSearch(value) {
      this.filterParmas.searchValue = value
      this.isInit = false
    },
    handleSearch(value) {
      this.isInit = false
      if (this.searchHistoryList.indexOf(value) === -1) {
        this.searchHistoryList.push(value)
        uni.setStorageSync('historyList', this.searchHistoryList)
      }
    },
    handleHistory(index) {
      this.searchHistoryList.splice(index, 1)
      uni.setStorageSync('historyList', this.searchHistoryList)
    },
  },
  components: {
    circleCard,
    customInput,
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  overflow-y: auto;

  .search-box {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .search-history {
    padding: 0 32rpx;

    .image_3 {
      border-radius: 50%;
      width: 36rpx;
      height: 36rpx;
    }

    .font {
      font-size: 28rpx;
      font-family: PingFang SC;
      line-height: 25.76rpx;
      color: #999999;
    }

    .image_4 {
      margin-right: 10rpx;
      width: 34rpx;
      height: 34rpx;
    }
  }

  .quan-list-box {
    padding: 0 32rpx;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22rpx 24rpx;
    margin-bottom: 24rpx;
  }

  .user-box {
    .ml-9 {
      margin-left: 18rpx;
    }

    .mt-9 {
      margin-top: 18rpx;
    }

    .list-item {
      padding: 0 32rpx;

      &:first-child {
        margin-top: 0;
      }

      .image_4 {
        border-radius: 50%;
        width: 80rpx;
        height: 80rpx;
      }

      .font {
        font-size: 32rpx;
        font-family: PingFang SC;
        line-height: 22.3rpx;
        font-weight: 700;
        color: #000000;
      }

      .text_4 {
        line-height: 22.84rpx;
      }

      .font_3 {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 22.3rpx;
        color: #999999;
      }

      .text_5 {
        line-height: 22.24rpx;
      }

      .button {
        padding: 16rpx 0;
        background-color: #fbd610;
        border-radius: 16rpx;
        width: 140rpx;
        height: 56rpx;

        .font_2 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 22.3rpx;
          font-weight: 700;
          color: #000000;
        }
      }
    }
  }
}
</style>